<template>
	<!-- 搜索栏 -->
	<view style="display: flex;">
		<image src="/static/img/avatar.png" class="logo" alt="logo"></image>
		<view class="search">
			<up-search :placeholder="$t('index.search.placeholder')" v-model="localKeyword" :show-action="false"
				:bgColor="bgColor" borderColor="rgba(187,187,187,0.3)" placeholder-color="#FFFFFF"
				search-icon-color="#FFFFFF" height="1.7rem" :clearabled="false"></up-search>
			<image src="/static/icon/camera.png" class="icon-camera" alt="icon"></image>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, watch, defineEmits, defineProps } from 'vue'
	// 接收父组件传递的 props
	const props = defineProps<{
		keyword: string;
		bgColor?: string; // 添加可选的背景颜色属性
	}>();

	// 设置默认值
	const bgColor = props.bgColor || 'rgba(187,187,187,0.3)';
	
	// 定义一个本地变量用于双向绑定
	const localKeyword = ref(props.keyword);
	// 定义自定义事件
	const emit = defineEmits(['update:keyword']);
	// 监听 localKeyword 的变化，并在变化时触发 update:keyword 事件
	watch(localKeyword, (newValue) => {
		emit('update:keyword', newValue);
	});
</script>

<style scoped>
	
	.logo {
		margin: 0.23rem 0 0.23rem 0.43rem;
		width: 2.44rem;
		height: 2.44rem;
		z-index: 3;
	}
	
	.search {
		position: relative;
		margin: 0.45rem 0 0 0.8rem;
		width: 80%;
		height: 1.94rem;
		z-index: 3;
		
		/* #ifdef MP-WEIXIN */
		width: 60%;
		/* #endif */
	}
	
	.icon-camera {
		position: absolute;
		top: 0.2rem;
		right: 0.7rem;
		width: 1.5rem;
		height: 1.5rem;
	}
</style>